<template>
    <div id="main">
        <div class="content page-order-checkout checkout">
            <div class="js-checkout-address-box">
                <div class="gray-box clear">
                    <div class="title columns-title pre-title">
                        <h2>收货信息</h2>
                    </div>
                    <div class="box-inner js-checkout-address-panel ">
                        <div class="address-common-table js-multiple-address-panel">
                            <ul class="address-item-list clear js-address-item-list">
                                <li v-for="(item,index) in addressList" :key="index" class="js-choose-address  selected-address-item">
                                    <div class="address-item">
                                        <div class="name-section">  {{item.username}}  </div>
                                        <div class="mobile-section">{{item.phone}}</div>
                                        <div class="detail-section"> 
                                            <span v-for="(itm,idx) in item.loc" :key="idx">
                                                {{itm.name}}
                                            </span>
                                            <br> {{item.address}} </div>
                                    </div>
                                    <div class="operation-section">
                                        <span @click="handleShow(index)" class="update-btn js-edit-address">修改</span>
                                        <span class="delete-btn js-delete-address">删除</span>
                                    </div>
                                </li>
                                <li @click="handleShow(-1)" class="add-address-item js-add-address">
                                    <p>使用新地址</p>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            <div class="gray-box">
                <div class="title pre-title">
                    <h2>购物清单</h2> 
                </div>
                <div class="box-inner ui-goods-cart">
                    <div class="gray-sub-title cart-table-title"> 
                        <span class="name">商品名称</span> 
                        <span class="subtotal">小计</span> 
                        <span class="num">数量</span> 
                        <span class="price">单价</span> 
                    </div>
                    <div class="cart-table">
                        <div class="cart-group js-cart-group">
                            <div class="cart-items" v-for="(item,index) in cartList" :key="index">
                                <div class="items-thumb">  
                                    <a href="javascript:;" target="_blank">
                                        <img :src="item.image">
                                    </a>  
                                </div>
                                <div class="name hide-row">
                                    <div class="name-cell"> 
                                        <a href="javascript:;" :title="item.title" target="_blank">
                                            {{item.title}}
                                        </a>
                                    </div>
                                </div>
                                <div class="subtotal">
                                    <div class="subtotal-cell">  ¥ {{item.num*item.price}}  </div> 
                                </div>
                                <div class="goods-num">1</div>
                                <div class="price">¥ {{item.price}}</div>
                            </div>
                        </div>
                    </div>
                    
                </div>
                <div class="box-inner"> 
                    <div class="order-discount-line"> 
                        <p> 商品总计： <span>¥ {{allInfo.checkPrice}}</span> </p> 
                        <p> 运费： <span>+ ¥ 0.00</span> </p>  
                        <p class="discount-line js-discount-cash"> <em>现金券</em>： 
                        <span> - 0 </span> 
                    </p>  
                    </div> 
                </div>
                <div class="box-inner"> 
                    <div class="last-payment clear"> 
                        <span class="jianguo-blue-main-btn big-main-btn payment-blue-bt fn-right js-checkout"> 
                            <a>提交订单</a> 
                        </span> 
                        <span class="prices fn-right">应付金额： <em>¥ {{allInfo.checkPrice}}</em></span> 
                    </div> 
                </div>
            </div>
        </div>

        <AddressPop 
            v-if="isShow" 
            @pop-close="isShow=false"
            :edit-num="editIdx"
        />
    </div>
</template>

<script>
    import {mapState,mapGetters} from 'vuex'
    import AddressPop from '../components/AddressPop.vue'
    export default {
       components: {
           AddressPop,
       },
       data() {
           return {
               isShow: false,
               editIdx:-1  //标记编辑、新增
           }
       },
       computed: {
           ...mapState({
               cartList:state=>{
                   return state.cart.cartList.filter(item=>{
                       return item.ischeck
                   })
               },
               addressList:state=>state.address.addressList
           }),
           ...mapGetters({
               allInfo:'cart/allInfo',
           })
       },
       methods: {
           handleShow(idx) {
               console.log(idx);
               this.isShow = true
               this.editIdx = idx
           }
       },
    }
</script>

<style src="../assets/css/checkout.css" scoped></style>